<template>

    <!-- 我们使用echarts 直接使用官方提供的api是不行的 -->

    <div class="bar" id="bar" :style="{ width: 600 + 'px', height: 400 + 'px' }">
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'
//  echarts 图表，本质是生成dom


// 接收一个父组件传递的数据
let props:any =  defineProps({
    echartsList:{
        type:Object,
    }
})

onMounted(()=>{
    // var myChart = echarts.init(document.getElementById('bar'));

    // console.log(props.echartsList.xdata,'父组件给子组件的 异步数据');
    // 获取不到值，是空的
    
    // echarts属性
    let option=  {
        xAxis: {
            type: 'category',
            data: props.echartsList.xdata
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 170, 110, 130],
                type: 'bar'
            }
        ]
    };
    myChart.setOption(option)
})


</script>

<style>

</style>